<template>
  <view class="innerContain">
       <view class="top-content"></view>
    <view class='topradio'>
    <!-- <view class=""> </view> -->
    <view class="childborder">
      <view >
        <u-form   :model="form"  ref="uForm"   :error-type="errorType">
          <u-form-item  class="selectone" style="padding:0rpx 0rpx 18rpx 0rpx;margin-top:-14rpx;" label-width="140" label="处理方式" prop="way">
            <u-input
            
              v-model="form.way"
              type="select"
               placeholder="请选择处理方式"
              @click="showMethod = true"
            />
            <u-select
              v-model="showMethod"
              :list="methodsList"
              @confirm="selectMethod"
            ></u-select>
          </u-form-item>

          <view class="" v-if="firstMethod">
            <u-form-item  class="selectone1" label-width="140" label="处理方法" prop="otype">
              <u-input
                v-model="form.otype"
                type="select"
                 placeholder="请选择处理方法"
                @click="showAnswer = true"
              />
              <u-select
                v-model="showAnswer"
                :list="answerList"
                @confirm="selectAnswer"
              ></u-select>
            </u-form-item>

            <view class="" v-if="firstHidden">
              <u-form-item label-width="140" class="selectone1" label="更换时间" prop="replaceTime">
                <u-input style="right:32rpx" type="text" v-model="form.replaceTime" :disabled='true' @click="show=true" />
                <u-calendar
                  v-model="show"
                  mode="date"
                 placeholder="请输入更换时间"
                  
                  @change="change"
                ></u-calendar>
              </u-form-item>
              <u-form-item label-width="140"  class="selectone1"  label="修复部门" prop="repairDept">
                <u-input style="right:32rpx" type="text"     placeholder="请输入修复部门" v-model="form.repairDept" />
              </u-form-item>
              <u-form-item label-width="140"  class="selectone1"  label="修复方法" prop="repairWay">
                <u-input style="right:32rpx" type="text"  placeholder="请输入修复方法"  v-model="form.repairWay" />
              </u-form-item>
              <u-form-item label-width="140"  class="borderbottom selectone1 "  label="拍照记录" prop="">
 
              </u-form-item>
                               <Upload  style="padding-bottom:20rpx;"  v-model="form.file"/>
            </view>
            <view class="" v-if="secondHidden">
              <u-form-item  label-width="140"  class="selectone1"  label="更换时间" prop="replaceTime">
                <u-input type="text"  style="right:32rpx" placeholder="请输入更换时间" :disabled='true' v-model="form.replaceTime" @click="show = true" />
                <u-calendar
                  v-model="show"
                  mode="date"
                    placeholder="请输入更换时间"
                  @change="change"
                ></u-calendar>
              </u-form-item>
              <u-form-item label-width="140"  class="selectone1"  label="制造单位" prop="makeUnit">
                <u-input style="right:32rpx" type="text"  placeholder="请输入制造单位" v-model="form.makeUnit" />
              </u-form-item>
              <u-form-item label-width="140"  class="selectone1"  label="更换原因" prop="replaceReason">
                <u-input style="right:32rpx" type="text" placeholder="请输入更换原因" v-model="form.replaceReason" />
              </u-form-item>
              <u-form-item label-width="140"  style="padding-bottom:20rpx;"    class="borderbottom selectone1"  label="设备代号" prop="sn">
                <u-input style="right:32rpx" type="text" placeholder="请输入设备代号" v-model="form.sn" />
              </u-form-item>
            </view>
          </view>
          <view class="" v-if="secondMethod">
            <u-form-item label-width="140" label="处理方法" prop="outanswer">
              <u-input
                v-model="form.outanswer"
                type="select"
                 placeholder="请选择处理方法" 
                @click="outshowAnswer = true"
              />
              <u-select
                v-model="outshowAnswer"
                :list="outanswerList"
                @confirm="outselectAnswer"
              >
              </u-select>
            </u-form-item>

            <view class="" v-if="outsecondHidden">
              <u-form-item label-width="140" label="修复地点" prop="repaireMethod">
                <u-input
                  type="select"
                  v-model="form.repaireMethod"
                 placeholder="请输入修复地点" 

                  @click="innershow = true"
                />
                <u-select
                  v-model="innershow"
                  :list="repaireList"
                  @confirm="repaireAnswer"
                ></u-select>
              </u-form-item>
              <u-form-item label-width="140" label="更换时间" prop="replaceTime">
                <u-input style="right:32rpx" type="text"  placeholder="请输入更换时间" :disabled='true' v-model="form.replaceTime" @click="show = true" />
                <u-calendar
                  v-model="show"
                  mode="date"
                  @change="change"
                ></u-calendar>
              </u-form-item>
              <u-form-item label-width="140" label="修复部门" prop="repairDept">
                <u-input style="right:32rpx" type="text"   placeholder="请输入修复部门"  v-model="form.repairDept" />
              </u-form-item>
              <u-form-item label-width="140" label="修复方法" prop="repairWay">
                <u-input style="right:32rpx" type="text"  placeholder="请输入修复方法" v-model="form.repairWay" />
              </u-form-item>
                    <u-form-item label-width="140"  class="borderbottom"  label="拍照记录" prop="">
 
              </u-form-item>
                               <Upload  style="padding-bottom:20rpx;"  v-model="form.file2"/>

            </view>
            <view class="" v-if="outfirstHidden">
              <u-form-item label-width="140" label="更换时间" prop="replaceTime">
                <u-input style="right:32rpx" type="text" v-model="form.replaceTime" :disabled='true' @click="show = true" />
                <u-calendar
                  v-model="show"
                  mode="date"
                   placeholder="请输入更换时间"
                  @change="change"
                ></u-calendar>
              </u-form-item>
              <u-form-item label-width="140" label="制造单位" prop="makeUnit">
                <u-input style="right:32rpx" type="text"  placeholder="请输入制造单位" v-model="form.makeUnit" />
              </u-form-item>
              <u-form-item label-width="140" label="更换原因" prop="replaceReason">
                <u-input style="right:32rpx" type="text" placeholder="请输入更换原因" v-model="form.replaceReason" />
              </u-form-item>
              <u-form-item label-width="140" label="设备代号" style="padding-bottom:20rpx;" prop="sn">
                <u-input style="right:32rpx" type="text" placeholder="请输入设备代号" v-model="form.sn" />
              </u-form-item>
            </view>
          </view>
        </u-form>
      </view>
    </view>

    <!-- <view class="botton-gap"> </view> -->

    <view class="footer">
      <u-button
        @click="returnHandle()"
        class="btn"
        type="primary"
        :ripple="true"
        ripple-bg-color="#32afff"
        >提交
      </u-button>
    </view>
  </view>
  </view>
</template>

<script>
import {
  pointCheckeTaskDetailList,
  pointCheckeTaskDetailAdd
} from "@/api/index.js";
export default {
  data() {
    return {
      errorType: ["message"],
      rules: {
        way: [
          {
            required: true,
            message: "请选择处理方式",
            trigger: ["blur", "change"]
          }
        ],
        otype: [
          {
            required: true,
            message: "请选择处理方法",
            trigger: ["blur", "change"]
          }
        ],

        repairDept: [
          {
            required: true,
            message: "请输入修复部门",
            trigger: ["blur", "change"]
          }
        ],
        replaceTime: [
          {
            required: true,
            message: "请选择更换时间",
            trigger: [ "change"]
          },
          
        ],
        makeUnit: [
          {
            required: true,
            message: "请输入制造单位",
            trigger: ["blur", "change"]
          }
        ],
        replaceReason: [
          {
            required: true,
            message: "请输入更换原因",
            trigger: ["blur", "change"]
          }
        ],
        sn: [
          {
            required: true,
            message: "请输入设备代号",
            trigger: ["blur", "change"]
          }
        ],
        repairWay: [
          {
            required: true,
            message: "请输入修复方法",
            trigger: ["blur", "change"]
          }
        ],
        outanswer: [
          {
            required: true,
            message: "请选择处理方法",
            trigger: ["blur", "change"]
          }
        ],
        repaireMethod: [
          {
            required: true,
            message: "请选择修复地点",
            trigger: ["blur", "change"]
          }
        ]
      },
      id: "",
      headers: {
        Authorization: "Bearer " + uni.getStorageSync("token")
      },
      form: {
        way: "",
        otype: "",
        outanswer: ""
      },
      show: false,
      showMethod: false,
      showAnswer: false,
      firstMethod: true,
      secondMethod: true,
      firstHidden: false,
      secondHidden: false,
      innershow: false,
      repaireList: [
        {
          label: "返厂维修",
          value: 0
        },
        {
          label: "现场维修",
          value: 1
        }
      ],

      answerList: [
        {
          value: 1,
          label: "设备更换"
        },
        {
          value: 0,
          label: "设备修复"
        },
        {
          value: 2,
          label: "继续使用"
        }
      ],

      methodsList: [
        {
          value: 0,
          label: "内部判断"
        },
        {
          value: 1,
          label: "平台发送厂家"
        },
        {
          value: 2,
          label: "数据保存"
        }
      ],

      outshowAnswer: false,
      outfirstHidden: false,
      outsecondHidden: true,

      outanswerList: [
        {
          label: "报废与更换",
          value: 0
        },
        {
          label: "修复",
          value: 1
        },
        {
          label: "继续使用",
          value: 2
        }
      ],
      position: null,
      number: null
    };
  },
  watch: {
    "form.way": {
      handler(newval, oldval) {
        if (this.form.way == "内部判断") {
          this.firstMethod = true;
          this.secondMethod = false;
        } else if (this.form.way == "平台发送厂家") {
          this.firstMethod = false;
          this.secondMethod = true;
        } else if (this.form.way == "数据保存") {
          this.firstMethod = false;
          this.secondMethod = false;
        }
      },
      deep: true
    },
    "form.otype": {
      handler(newval, oldval) {
        if (this.form.otype == "设备更换") {
          this.firstHidden = false;
          this.secondHidden = true;
        } else if (this.form.otype == "设备修复") {
          this.firstHidden = true;
          this.secondHidden = false;
        } else if (this.form.otype == "继续使用") {
          this.firstHidden = false;
          this.secondHidden = false;
        }
      },
      deep: true
    },
    "form.outanswer": {
      handler(newval, oldval) {
        if (this.form.outanswer == "报废与更换") {
          this.outfirstHidden = true;
          this.outsecondHidden = false;
        } else if (this.form.outanswer == "修复") {
          this.outfirstHidden = false;
          this.outsecondHidden = true;
        } else if (this.form.outanswer == "继续使用") {
          this.outfirstHidden = false;
          this.outsecondHidden = false;
        }
      },
      deep: true
    }
  },
  onShow() {
    
  },
  onLoad(val) {
    this.position = val.position;
    this.number = val.number;
    this.id = val.id;
    this.getList();
  },
  methods: {
    getList() {
      this.outsecondHidden = false;
      this.firstHidden = false;
      this.firstMethod = false;
      this.secondMethod = false;
      pointCheckeTaskDetailList(this.number).then(res => {
        this.childid = res.data.id;
        if (!this.childid) {
          this.outsecondHidden = false;
          this.firstHidden = false;
          this.firstMethod = false;
          this.secondMethod = false;
        }
        for (let i in res.data) {
          if (!res.data[i]) {
            delete res.data[i];
          }
        }
        this.form = res.data;
        if (this.form.way == "平台发送厂家") {
          this.form.file2 = this.form.photoRecord;
          this.form.outanswer = this.form.type;
          this.form.repaireMethod = this.form.typeMsg;
          delete this.form["type"];
        } else if (this.form.way == "内部判断") {
          this.form.file = this.form.photoRecord;
          this.form.otype = this.form.type;
          delete this.form["type"];
        }
      });
      this.outsecondHidden = false;
      this.firstHidden = false;
      this.firstMethod = false;
      this.secondMethod = false;
    },
    returnHandle() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (this.form.way == "平台发送厂家") {
            this.form.file = this.form.file2;
            this.form.type = this.form.outanswer;
          } else if (this.form.way == "内部判断") {
            this.form.type = this.form.otype;
          }
          let file = "";

          if (this.form.type == "设备修复") {
          } else if (this.form.type == "修复") {
          }
          const data = {
            id: this.childid,
            detailId: this.number,
            way: this.form.way,
            type: this.form.type,
            replaceTime: this.form.replaceTime,
            makeUnit: this.form.makeUnit,
            replaceReason: this.form.replaceReason,
            sn: this.form.sn,
            repairDept: this.form.repairDept,
            repairWay: this.form.repairWay,
            photoRecord: this.form.file,
            typeMsg: this.form.repaireMethod
          };
          if ((data.id == null) | (data.id == undefined) | (data.id == "")) {
            delete data["id"];
          }
          pointCheckeTaskDetailAdd(data).then(res => {
            uni.navigateBack({
              delta: 1
            });
          });
        } else {
        }
      });
    },
    outselectAnswer(val) {
      this.form.outanswer = val[0].label;
      if (val[0].value == 0) {
        const way = this.form.way;
        const outanswer = this.form.outanswer;
        this.$refs.uForm.resetFields();
        this.form.way = way;
        this.form.outanswer = outanswer;

        this.outfirstHidden = true;
        this.outsecondHidden = false;
      } else if (val[0].value === 1) {
        const way = this.form.way;
        const outanswer = this.form.outanswer;
        this.$refs.uForm.resetFields();
        this.form.way = way;
        this.form.outanswer = outanswer;
        this.outfirstHidden = false;
        this.outsecondHidden = true;
      } else {
        this.outfirstHidden = false;
        this.outsecondHidden = false;
      }
    },
    timeClick(){ 
      document.activeElement.blur()
          uni.hideKeyboard();//隐藏软键盘  
    },
    selectMethod(val) {
      this.form.way = val[0].label;
      if (val[0].value == 0) {
        this.$refs.uForm.resetFields();
        this.form.way = val[0].label;
         this.firstMethod = true;
        this.secondMethod = false;
      } else if (val[0].value === 1) {
  this.$refs.uForm.resetFields();
        this.firstMethod = false;
        this.secondMethod = true;
        this.form.way = val[0].label;
      } else {
        this.firstMethod = false;
        this.secondMethod = false;
      }
    },
    selectAnswer(val) {
      this.form.otype = val[0].label;
      if (val[0].value == 0) {
        const way = this.form.way;
        const otype = this.form.otype;
        this.$refs.uForm.resetFields();
        this.form.way = way;
        this.form.otype = otype;
        this.firstHidden = true;
        this.secondHidden = false;
      } else if (val[0].value === 1) {
        const way = this.form.way;
        const otype = this.form.otype;
        this.$refs.uForm.resetFields();
        this.form.way = way;
        this.form.otype = otype;
        this.firstHidden = false;
        this.secondHidden = true;
      } else {
        this.firstHidden = false;
        this.secondHidden = false;
      }
    },
    repaireAnswer(val) {
      this.form.repaireMethod = val[0].label;
    },
    change(e) {
      this.form.replaceTime = e.result;
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
  }
};
</script>

<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  margin: 30rpx  24rpx;
  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
}
.u-form {
  padding: 30rpx 32rpx 0px 32rpx;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 544rpx;
  height: 91rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //  color:red !important
}
//   /deep/ .u-border-bottom:after {
//     border-top-width: 1px;
//     border-bottom-width: 0px;
// }
// .selectone {
//     .u-border-bottom:after {
//     border-top-width: 0px !important
// }

// }
/deep/ .photoimage {
  .u-add-wrap {
    width: 71px !important;
    height: 71px !important;
  }
}
/deep/ .selectone:after { 
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
}
.selectone1:after{
    border-bottom-width: 0px !important;
      border-top-width: 1px !important;
}
</style>